<template>
    <div class="register">
        <div class="header">
            <i @click="golog"></i>
        </div>
        <div class="reg_box">
            <div class="reg_titile">账号注册</div>
            <div class="reg_from">
                <div class="text">
                    <span>+86</span>
                    <input type="text" v-model="useraccount" placeholder="请输入邮箱" />
                </div>
                <div class="email-code">
                    <input type="text" v-model="emailcode" placeholder="请输入邮箱验证码" />
                    <p @click="getCode">获取验证码</p>
                </div>
                <div class="password">
                    <input type="password" v-model="password" placeholder="请输入密码" />
                </div>
            </div>
            <div class="reg_btn active" @click="goRegister">注册</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { register, sendCode } from "../../api";
import { showToast } from "vant";

let router = useRouter();

const useraccount = ref("");
const password = ref("");
const emailcode = ref("");

//注册
const goRegister = () => {
    let user_acc = useraccount.value;
    let user_pwd = password.value;
    let email_code: string = emailcode.value;

    if (user_acc.length == 0 || user_pwd.length == 0) {
        // console.log("输入框不能为空");
        showToast("输入框不能为空。");
        return;
    }
    let data = {
        user_acc,
        user_pwd,
        email_code,
    };
    register(data)
        .then((res: any) => {
            console.log(res);
            if (res.code == 200) {
                showToast(res.msg);
                router.push({
                    path: "/login",
                });
            }
        })
        .catch((err) => {
            console.log(err);
        });
};

// 1502719402@qq.com
const getCode = () => {
    let email = useraccount.value;
    if (email.length == 0) {
        // console.log("输入框不能为空");
        showToast("请输入邮箱");
        return;
    }
    let data = {
        email: "1502719402@qq.com",
    };
    // console.log(data);

    sendCode(data);
};

//去登录
const golog = () => {
    router.push({
        path: "/login",
    });
};
</script>

<style lang="scss" scoped>
.register {
    width: 100%;
    padding: 0 15px;

    .header {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border: 1px solid #000;

        i {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url(@/assets/back.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }

    .reg_box {
        padding-top: 20px;
    }
    .reg_titile {
        font-size: 18px;
        padding-bottom: 15px;
    }
    .reg_from {
        .text {
            width: 100%;
            padding: 15px 0 10px;
            border-bottom: 1px solid #f0f0f0;

            span {
                padding-right: 10px;
                border-right: 1px solid #f0f0f0;
            }

            input {
                outline: 0;
                border: 0;
                padding-left: 10px;
            }
        }
        .email-code,
        .password {
            padding: 20px 0 15px;
            border-bottom: 1px solid #f0f0f0;

            input {
                outline: 0;
                border: 0;
            }
        }
        .email-code {
            position: relative;
            padding-right: 100px;

            p {
                font-size: 14px;
                color: #999;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
    }

    .reg_btn {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        border: 1px solid #f0f0f0;
        background: #ececec;
        font-size: 16px;
        color: #fff;
        padding: 10px;
        border-radius: 20px;

        &.active {
            background: #353535;
        }
    }
}
</style>
